<!DOCTYPE HTML>
<html lang="en">
<head>

<!-- charset -->
<meta charset="UTF-8">

<!-- Title, description and keywords -->
<title>Xero | Premium XHTML &amp; CSS Template By TahaH Studio</title>
<meta name="description" content="A premium (X)HTML &amp; CSS template designed and developed by TahaH Studio">
<meta name="keywords" content="xero, XHTM, CSS, Template, Professional, Mulicolour, TahaH, Themeforest">


<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/sky-blue.css" id="skin" media="screen">
<link rel="stylesheet" type="text/css" href="css/colorbox.css" media="all">
<link rel="stylesheet" type="text/css" href="css/folio3.css" media="all">
<!--
<link rel="stylesheet" type="text/css" href="css/skins/blue.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/red.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/purple.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/green.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/orange.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/yellow.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/cream.css" media="screen">
-->

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->

<!-- Javascripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.superfish.min.js"></script>
<script type="text/javascript" src="js/jquery.nivoslider.pack.js"></script>
<script type="text/javascript" src="js/xero.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	// Nivo Slider Option
	$(".folio3 .project_slideshow").nivoSlider({
		effect: 'sliceDown',
		controlNav: false,
		slices: 25,
		pauseTime: 5000,
		directionNavHide: false
	});
});
</script>


</head>
<body>
<div id="wrapper"><!-- add grunge class for grunge style -->
	<div id="header_container">
		<div id="header">
			<h1 id="logo"> <a href="index.html">Xero HTML &amp; CSS Template</a> </h1>
			<!-- end logo -->
			
			<ul id="nav">
				<li><a href="index.html"><span>Home</span></a></li>
				<li><a href="#"><span>Pages</span></a>
					<ul class="subnav">
						<li><a href="html-elements.html">HTML Elements Test</a></li>
						<li><a href="full-width.html">Full Width</a></li>
						<li><a href="#">Pages Options</a>
							<ul class="subnav">
								<li><a href="sidebar-left.html">Sidebar Left</a></li>
								<li><a href="sidebar-right.html">Sidebar Right</a></li>
							</ul>
						</li>
						<li><a href="#">Dropdown</a>
							<ul class="subnav">
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a>
									<ul class="subnav">
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
									</ul>
									<!-- end 3rd sub navigation --> 
								</li>
							</ul>
							<!-- end 2nd sub navigation --> 
						</li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#"><span>Blog</span></a>
					<ul class="subnav">
						<li><a href="blog.html">Blog Page</a></li>
						<li><a href="single-post.html">Single Post</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#" class="current"><span>Portfolio</span></a>
					<ul class="subnav">
						<li><a href="portfolio-1.html">Portfolio Style 1</a></li>
						<li><a href="portfolio-2.html">Portfolio Style 2</a></li>
						<li><a href="portfolio-3.html">Portfolio Style 3</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="contact.php"><span>Contact</span></a></li>
			</ul>
			<!-- end main navigation -->
			
			<div class="clear"></div>
			<!-- clears floted logo & nav -->
			
			<div id="page_title">
				<ul class="breadcrumb_nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">Portfolio</a></li>
				</ul>
				<h1>Portfolio Option 3</h1>
			</div>
		</div>
		<!-- end header (940px width) --> 
	</div>
	<!-- end header container (100% width) -->
	
	<div id="body_content">
		<div id="content" class="">
			<div class="full" >
				<h2 class="noBottomMargin">Slideshow<em class="heading_description">Option that allows you to add a image slideshow next to the description</em></h2>
			</div>
			<!-- end full width container -->
			
			<div class="full">
				<div class="folio3">
					<div class="project_details">
						<h3 class="project_title">Test Project</h3>
						<!-- project title -->
						
						<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh sit amet ligula lacinia condimentum et sit amet orci. Morbi ultricies facilisis nunc, vel luctus lacus lacinia id. Nullam non porta nisl.</p>
						<!-- project description -->
					
						<ul class="checklist">
							<li>HTML/CSS</li>
							<li>Content Manegment</li>
							<li>PHP</li>
							<li>Wordpress</li>
						</ul>
						<!-- project cecklist -->
						
						<ul class="button_array">
							<li><a href="http://themeforest.net/" class="small_button external_link" target="_blank">Visit website</a></li>
						</ul>
						<!-- project links -->
					</div>
					<!-- project details -->
					
					<div class="project_slideshow">
						<img src="images/folio_large1.png" alt="">
						<img src="images/folio_large2.png" alt="">
					</div>
				</div>
				<!-- end folio item -->

				<span class="br-dashed"></span>
				<!-- dashed line breaker -->

				<div class="folio3">
					<div class="project_details">
						<h3 class="project_title">Test Project</h3>
						<!-- project title -->
						
						<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh sit amet ligula lacinia condimentum et sit amet orci. Morbi ultricies facilisis nunc, vel luctus lacus lacinia id. Nullam non porta nisl.</p>
						<!-- project description -->
					
						<ul class="checklist">
							<li>HTML/CSS</li>
							<li>Content Manegment</li>
							<li>PHP</li>
							<li>Wordpress</li>
						</ul>
						<!-- project cecklist -->
						
						<ul class="button_array">
							<li><a href="http://themeforest.net/" class="small_button external_link" target="_blank">Visit website</a></li>
						</ul>
						<!-- project links -->
					</div>
					<!-- project details -->
					
					<div class="project_slideshow">
						<img src="images/folio_large1.png" alt="">
						<img src="images/folio_large2.png" alt="">
					</div>
				</div>
				<!-- end folio item -->
				
				<ul class="pagination">
					<li><a href="#" class="large_button">&laquo; Pravious</a></li>
					<li><a href="#" class="large_button current">1</a></li>
					<li><a href="#" class="large_button">2</a></li>
					<li><a href="#" class="large_button">3</a></li>
					<li><a href="#" class="large_button">4</a></li>
					<li><a href="#" class="large_button">5</a></li>
					<li><a href="#" class="large_button">Next &raquo;</a></li>
				</ul>
			</div>
			
		</div>
		<!-- end content -->
	</div>
	<!-- end body content -->
	
	<div id="footer_container">
		<div id="footer">
			<ul class="copyright_info reset_style">
				<li><img src="images/xero_logos/footer_logo.png" alt="" id="footer_logo" class="reset_style center"></li>
				<li>A Theme By <a href="http://wizylabs.com">Wizy Labs</a>. Copyright &copy; 2010</li>
			</ul>
			<!-- end copyright info, copyright info can be changed as desired -->
			
			<div class="footer_nav_container">
				<ul class="footer_nav reset_style">
					<li><a href="#">Home</a> /</li>
					<li><a href="#">About</a> /</li>
					<li><a href="#">Advertise</a> /</li>
					<li><a href="#">Contact</a> /</li>
					<li><a href="#">Icons by IconDock</a></li>
				</ul>
				<!-- end footer nav -->
				
				<ul class="social_profiles reset_style">
					<li><a href="#"><img title="By mail" src="images/icons/social_profiles/16/email.png"></a></li>
					<li><a href="#"><img title="My Facebook account" src="images/icons/social_profiles/16/facebook.png"></a></li>
					<li><a href="#"><img title="My Flickr account" src="images/icons/social_profiles/16/flickr.png"></a></li>
					<li><a href="#"><img title="My Twitter account" src="images/icons/social_profiles/16/twitter.png"></a></li>
					<li><a href="#"><img title="RSS feed" src="images/icons/social_profiles/16/rss.png"></a></li>
				</ul>
				<!-- end social profiles nav -->
			</div>
		</div>
		<!-- end actual footer -->
	</div>
	<!-- end footer container -->
</div>
<!-- end wrapper -->
</body>
</html>
</html>